<template>
  <div class="ml-2 flex-1">
    <a-card :bordered="false" style="height: 830px; width: 1380px">
      <a-form
        :model="searchForm"
        layout="inline"
        class="mt-3"
        ref="searchFormRef"
      >
        <a-form-item label="开票号码" name="invoiceNumber">
          <a-input
            placeholder="请输入"
            style="width: 200px"
            v-model:value="searchForm.invoiceNumber"
          />
        </a-form-item>
        <a-form-item label="抬头" name="title">
          <a-input
            placeholder="请输入"
            style="width: 200px"
            v-model:value="searchForm.title"
          />
        </a-form-item>
        <a-form-item label="订单号" name="orderNumber">
          <a-input
            placeholder="请输入"
            style="width: 200px"
            v-model:value="searchForm.orderNumber"
          />
        </a-form-item>
        <a-form-item label="开票日期" name="applicationDateRange">
          <a-range-picker
            v-model:value="searchForm.applicationDateRange"
          />
        </a-form-item>
        <a-form-item label="申请日期" name="invoiceDateRange">
          <a-range-picker
            v-model:value="searchForm.invoiceDateRange"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            class="mr-3"
            :icon="h(SearchOutlined)"
            @click="onSearch"
            >查询</a-button
          >
          <a-button
            type="primary"
            :icon="h(RedoOutlined)"
            class="mr-3"
            @click="onReset"
            >重置</a-button
          >
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        class="mt-5"
        :scroll="{ x: 3000, y: 550 }"
        :row-class-name="
              (_record: any, index: number) =>
                index % 2 === 1 ? 'table-striped' : null
            "
      >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'active'">
            <a-button type="link">申请红冲</a-button>
          </template>
          <template v-if="column.dataIndex === 'isInvoiced'">{{
            record.isInvoiced == 1 ? "已开票" : "未开票"
          }}</template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, h } from "vue";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons-vue";
import { getInvoiceManageApi } from "#/api/core/charge";
import dayjs from "dayjs";
import { message } from 'ant-design-vue';
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const searchForm = reactive({
  invoiceNumber: "",
  title: "",
  orderNumber: "",
  applicationDateRange: "",
  invoiceDateRange: "",
  refundStatus: "",
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const searchFormRef = ref(null);
const dataSource = ref([]);
const columns = [
  {
    title: "开票流水号",
    dataIndex: "invoiceSerialNumber",
    key: "invoiceSerialNumber",
    align: "center",
  },
  {
    title: "购方单位名称",
    dataIndex: "title",
    key: "title",
    align: "center",
  },
  {
    title: "购方单位税号",
    dataIndex: "taxpayerIdentificationNumber",
    key: "taxpayerIdentificationNumber",
    align: "center",
  },
  {
    title: "行业应用",
    dataIndex: "industryApplication",
    key: "industryApplication",
    align: "center",
  },
  {
    title: "订单号",
    dataIndex: "orderNumber",
    key: "orderNumber",
    align: "center",
  },
  {
    title: "合计金额(元)",
    dataIndex: "totalAmount",
    key: "totalAmount",
    align: "center",
  },
  {
    title: "合计税额(元)",
    dataIndex: "totalPriceWithTax",
    key: "totalPriceWithTax",
    align: "center",
  },
  {
    title: "价税合计(元)",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "开票代码",
    dataIndex: "invoiceCode",
    key: "invoiceCode",
    align: "center",
  },
  {
    title: "开票号码",
    dataIndex: "invoiceNumber",
    key: "invoiceNumber",
    align: "center",
  },
  {
    title: "开票人",
    dataIndex: "invoicePerson",
    key: "invoicePerson",
    align: "center",
  },
  {
    title: "开票时间",
    dataIndex: "invoiceDate",
    key: "invoiceDate",
    align: "center",
  },
  {
    title: "开票类型",
    dataIndex: "invoiceType",
    key: "invoiceType",
    align: "center",
  },
  {
    title: "申请时间",
    dataIndex: "applicationDate",
    key: "applicationDate",
    align: "center",
  },
  {
    title: "原开票代码",
    dataIndex: "originalInvoiceCode",
    key: "originalInvoiceCode",
    align: "center",
  },
  {
    title: "原开票号码",
    dataIndex: "originalInvoiceNumber",
    key: "originalInvoiceNumber",
    align: "center",
  },
  {
    title: "购方地址及电话",
    dataIndex: "addressAndPhone",
    key: "addressAndPhone",
    align: "center",
  },
  {
    title: "购方开户行及地址",
    dataIndex: "bankNameAndAccount",
    key: "bankNameAndAccount",
    align: "center",
  },
  // {
  //   title: "发票状态",
  //   dataIndex: "checkStatus",
  //   key: "checkStatus",
  //   align: "center",
  // },
  {
    title: "推送次数",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "开票结果",
    dataIndex: "isInvoiced",
    key: "isInvoiced",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "active",
    key: "active",
    align: "center",
    fixed: "right",
  },
];
const onSearch = () => {
  if (!props.selectedNodeId || props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    const data = {
      headerMessage: {
        invoiceNumber: searchForm.invoiceNumber ?? "",
        title: searchForm.title ?? "",
        orderNumber: searchForm.orderNumber ?? "",
        applicationDateBegin:
          searchForm.applicationDateRange.length != 0
            ? dayjs(searchForm.applicationDateRange[0]).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            : "",
        applicationDateEnd:
          searchForm.applicationDateRange.length != 0
            ? dayjs(searchForm.applicationDateRange[1]).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            : "",
        invoiceDateBegin:
          searchForm.invoiceDateRange.length != 0
            ? dayjs(searchForm.invoiceDateRange[0]).format("YYYY-MM-DD HH:mm:ss")
            : "",
        invoiceDateEnd:
          searchForm.invoiceDateRange.length != 0
            ? dayjs(searchForm.invoiceDateRange[1]).format("YYYY-MM-DD HH:mm:ss")
            : "",
        refundStatus: searchForm.refundStatus ?? "",
      },
      treeData: props.selectedNodeId,
      page: pagination.current,
      limit: pagination.pageSize,
    };
    getInvoiceManageApi(data).then((res: any) => {
      console.log(res);
      dataSource.value = res.data;
      pagination.total = res.total;
    });
  }
};
const onReset = () => {
  searchFormRef.value.resetFields();
};
</script>
<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 10px !important;
}
</style>
